<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="事故时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="事故地点:">
            <span>{{ dataInfo.address }}</span>
          </el-form-item>
          <el-form-item label="警报类型:">
            <span>{{ dataInfo.notifyType | typeFilters }}</span>
          </el-form-item>
          <el-form-item label="通知对象:">
            <span>{{ dataInfo.villageName }}-{{ dataInfo.buildNames }}-{{
              dataInfo.unitNames
            }}-{{ dataInfo.floorNames }}-{{ dataInfo.houseNumber }}</span>
          </el-form-item>
          <el-form-item label="通知状态:">
            <span>{{ dataInfo.notifyState | statusFilters }}</span>
          </el-form-item>
        </el-row>

        <div class="tit" style="margin: 10px 0 20px 0;">
          <h2>通知统计</h2>
        </div>
        <el-row style="padding-top: 0;">
          <el-table :data="statisticsList" border :fit="true" highlight-current-row v-loading="loading_1"
            element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据">
            <el-table-column prop="sumHouse" label="通知总户数" align="center" width="auto">
            </el-table-column>
            <el-table-column prop="successHouse" label="成功户数" align="center" width="auto">
            </el-table-column>
            <el-table-column prop="notifyPhone" label="电话通知总人数" align="center" width="auto">
            </el-table-column>
            <el-table-column prop="connectedPhone" label="电话已接通人数" align="center" width="auto">
            </el-table-column>
          </el-table>
        </el-row>

        <div class="tit">
          <h2>通知明细</h2>
          <el-button type="success" plain size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
        </div>
        <div class="search-mx">
          <el-row class="header-row">
            <el-col>
              <div class="search_wrap">
                <el-form :inline="true" ref="searchForm" :model="searchForm">
                  <el-form-item prop="notifyState" label="通知状态:">
                    <el-select v-model="searchForm.notifyState" :clearable="true" placeholder="请选择状态">
                      <el-option v-for="item in statusList_s" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="address" label="事故地点:">
                    <el-input v-model="searchForm.address" placeholder="请输入地址"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
                    <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row style="padding-top: 0;">
          <el-table :data="taskRecordList" border :fit="true" highlight-current-row v-loading="loading"
            element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据">
            <el-table-column prop="createDate" label="通知时间" align="center" width="100px">
            </el-table-column>
            <el-table-column label="通知类型" align="center" width="100px">
              <template slot-scope="scope">
                {{ scope.row.notifyType == 1 ? "安全报警" : "邻里" }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="详细地址" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="phones" label="手机号" align="center">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.phones" :key="index">
                  <span v-if="item.show">{{ item.full }}</span>
                  <span v-else>{{ item.hidden }}</span>
                  <i :class="item.show ? 'el-icon-minus' : 'el-icon-view'" @click="showFullPhone(item)"
                    style="font-size: 16px;"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="againCount" label="再次通知次数" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="handleUserName" label="线下通知人" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="handleDate" label="线下通知时间" align="center" width="100px">
            </el-table-column>
            <el-table-column label="通知状态" align="center" width="auto">
              <template slot-scope="scope">
                {{ scope.row.notifyState | statusFilters }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="auto" align="center">
              <template slot-scope="scope">
                <el-row>
                  <el-button v-if="scope.row.notifyState == -1" size="mini"
                    @click="operateClick(scope.row, 1)">我已通知</el-button>

                  <!-- 报告单操作 -->
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
            layout="total, sizes, jumper, next, pager, prev" :total="page.total"></el-pagination>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import noticeApi from "@/api/message/notice";
export default {
  data() {
    return {
      dataInfo: {},
      notifyId: this.$route.query.notifyId,
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      loading: false,
      loading_1: false,
      taskRecordList: [],
      statisticsList: [],
      searchForm: { notifyState: "", address: "" },
      statusList_s: [
        { value: "1", label: "通知中" },
        { value: "5", label: "部分成功" },
        { value: "-1", label: "通知失败" },
        { value: "10", label: "通知成功" },
      ],
    };
  },
  computed: {},
  mounted() {
    this.getData();
    this.getMxList();
    this.getStatisticsList();
  },
  methods: {
    showFullPhone(e) {
      e.show = !e.show
    },
    getData() {
      this.$emit("show-loading", true);
      noticeApi
        .noticeDetail({ notifyId: this.notifyId })
        .then((res) => {
          this.dataInfo = res.data;
          this.$emit("show-loading", false);
        })
        .catch((error) => {
          this.$emit("show-loading", false);
        });
    },
    getStatisticsList() {
      this.loading_1 = true;
      noticeApi
        .noticeStatistics({ notifyId: this.notifyId })
        .then((res) => {
          this.statisticsList = [res.data];
          this.loading_1 = false;
        })
        .catch((error) => {
          this.loading_1 = false;
        });
    },
    getMxList() {
      this.loading = true;
      noticeApi
        .notifyMx({
          notifyId: this.notifyId,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          notifyState: this.searchForm.notifyState,
          address: this.searchForm.address,
        })
        .then((res) => {
          this.loading = false;
          this.taskRecordList = res.data.list;
          for (let i in this.taskRecordList) {
            if (this.taskRecordList[i].phones.includes(",")) {
              this.taskRecordList[i].phones = this.taskRecordList[i].phones
                .split(",")
                .map((phone) => {
                  let hiddenPhone = phone.replace(
                    /(\d{3})\d{4}(\d{4})/,
                    "$1****$2"
                  );
                  return { full: phone, hidden: hiddenPhone, show: false };
                });
            } else {
              let hiddenPhone = this.taskRecordList[i].phones.replace(
                /(\d{3})\d{4}(\d{4})/,
                "$1****$2"
              );
              this.taskRecordList[i].phones = [
                { full: this.taskRecordList[i].phones, hidden: hiddenPhone, show: false },
              ];
            }
          }
          this.page.total = res.data.total;
        })
        .catch((error) => { });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.back();
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getMxList();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getMxList();
    },
    operateClick(e) {
      this.$confirm("是否确认已通知?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          noticeApi
            .offlineNotice({ taskRecordId: e.taskRecordId })
            .then((res) => {
              if (res.status == 0) {
                this.$Utils.notifySuccess();
                this.getMxList();
              }
            })
            .catch((error) => { });
        })
        .catch(() => { });
    },
    onSearch() {
      this.page.pageNo = 1;
      this.getMxList();
    },
    refresh() {
      this.getMxList();
      this.getStatisticsList();
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch()
    },
  },
  filters: {
    typeFilters(val) {
      switch (val) {
        case "fire":
          val = "火警";
          break;

        case "gasLeak":
          val = "燃气泄漏";
          break;

        case "lockOpen":
          val = "被盗风险";
          break;
        case "soak":
          val = "水浸溢水";
          break;
        case "sos":
          val = "紧急求助";
          break;
        case "fall":
          val = "洪涝灾害";
          break;
        case "liftFault":
          val = "电梯故障";
          break;
        case "wateroff":
          val = "停水";
          break;
        case "blackOut":
          val = "停电";
          break;
        case "other":
          val = "其他";
          break;
      }
      return val;
    },
    statusFilters(val) {
      switch (val) {
        case 1:
          val = "通知中";
          break;
        case 5:
          val = "部分通知";
          break;
        case -1:
          val = "通知失败";
          break;
        case 10:
          val = "通知成功";
          break;
      }
      return val;
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/views/content.scss";
@import "@/assets/css/views/add.scss";
</style>
